<template>
	<view class="content">
		<view class="headbg" :style="'padding-top:' + navHeight + 'px;'">
			<view class="row head" :style="'height:'+ navHeight +'px;line-height:' + navHeight +'px'">
				<view class="col-4 t_left t_size_bold" @click="back()">
					<text class="iconfont icon-zuojiantou t_size_34"></text>
				</view>
				<view class="col-16 t_center t_size_28">
					订单详情
				</view>
			</view>
			<view class="col-24 t_size_30">
				下单编号：{{detail.orderNum}}
			</view>
			<view class="col-24 t_size_30">
				下单时间：{{detail.createTime}}
			</view>
		</view>
		<view class="detail">
			<view class="orderMsg">
				<view class="orderTitle">
					订单信息：
				</view>
				<view class="row">
					<view class="col-2 t_center" style="color: rgb(255,173,0);">
						·
					</view>
					<view class="col-22 t_size_28">
						{{detail.departData}}{{detail.departTimeStr}}
					</view>
				</view>
				<view class="row">
					<view class="col-2 t_center" style="color: rgb(108,191,49);">
						·
					</view>
					<view class="col-22 t_size_28">
						{{detail.getOnPoint}}
					</view>
				</view>
				<view class="row">
					<view class="col-2 t_center" style="color: rgb(34,128,241);">
						·
					</view>
					<view class="col-22 t_size_28">
						{{detail.getOffPoint}}
					</view>
				</view>
			</view>
			<view class="message t_size_28">
				<view class="row">
					<view class="col-8">
						车票
					</view>
					<view class="col-16 t_right" style="color: #999999;">
						￥{{detail.oneAmount}}*{{detail.ticketNum }}张
					</view>
				</view>
				<view class="row">
					<view class="col-8">
						优惠券
					</view>
					<view class="col-16 t_right" style="color: rgb(119,179,81);">
						￥-{{detail.preferentialAmount }}
					</view>
				</view>
				<view class="row">
					<view class="col-8">
						订单总额
					</view>
					<view class="col-16 t_right" style="color: rgb(254,39,34);">
						￥{{detail.orderAmount}}
					</view>
				</view>
				<view class="row bzxx" v-if="detail.orderRemarks != ''">
					<view class="col-24 bzxxkt">
						备注信息
					</view>
					<view class="bzxxnr">
						<text v-for="(item,index) in detail.orderRemarks.split(',')" :key="index">{{item}}</text>
					</view>
				</view>
			</view>
			<view class="clxx" v-if="detail.carPlateNo">
				<view class="clxxkt">
					车辆信息
				</view>
				<view class="row driver">
					<view class="col-5 img t_center">
						<view class="head_img">
							<image src="../../static/trip/dh@2x.png" mode="scaleToFill"></image>
						</view>
						<view class="head_name">
							{{detail.driverName}}
						</view>
					</view>
					<view class="col-12 off-2">
						<view class="row d_content">
							<view class="col-24 license">
								{{detail.carPlateNo}}
							</view>
							<view class="model">
								黑色|{{detail.carBrand}}{{detail.carType}}
							</view>
							<!-- <view class="row score">
								<view>
									<uni-rate :isFill="true" :size="16" :value="4.5" :readonly="true"></uni-rate>
								</view>
								<view class="off-1">
									4.5分
								</view>
							</view> -->
						</view>
					</view>
					<view class="col-5 t_right phone">
						<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
			<!-- <view class="evaluate row">
				<view class="col-24">
					<view class="row ev_title">
						<view class="col-4 set-1">
							
						</view>
						<view class="t_size_bold t_size_34">
							评价该服务
						</view>
						<view class="col-4 off-1">
							
						</view>
					</view>
					<view class="row ev_score">
						<uni-rate :isFill="true" :size="25" :margin="10" :allowHalf="true" :value="0" :readonly="false"></uni-rate>
					</view>
					<view class="row ev_ni">
						<view class="col-24 t_center t_size_26">
							匿名评价
						</view>
					</view>
				</view>
			</view> -->
			<view class="row btn" v-if="detail.orderState == 1">
				<view class="col-22 off-1">
					<button type="primary" @click="returns()">申请退款</button>
				</view>
			</view>
			<!-- <view class="row btn">
				<view class="col-10 off-1">
					<button type="warn">一键报警</button>
				</view>
				<view class="col-10 off-1 set-1">
					<button type="primary">联系司机</button>
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import uni_rate from '@/components/uni-rate/uni-rate.vue'
	export default {
		components:{
			"uni-rate": uni_rate
		},
		data(){
			return {
				navHeight: 0,
				orderId: 0,
				detail:{
					createTime: "",
					departData: "",
					departTimeStr: "",
					getOffPoint: "",
					getOnPoint: "",
					oneAmount: 0.01,
					orderAmount: 0.01,
					orderState: 1,
					orderNum: "1640662054596",
					payAmount: 0.01,
					preferentialAmount: 0,
					ticketNum: 1,
					driverName:'',
					carBrand:"",
					carPlateNo:'',
					carType:"",
					orderRemarks:""
				}
			}
		},
		onLoad(option) {
			this.orderId = option.id;
			// #ifdef MP-WEIXIN
			let that = this;
			wx.getSystemInfo({
				success: res => {
					that.navHeight = res.statusBarHeight;
				}
			})
			// #endif
		},
		onShow() {
			this.load();			
		},
		methods:{
			async load(){
				let res = await this.$api.request(this.$api.order.intercityinfo,{orderId: this.orderId});
				if(res){
					this.detail = res;
					// console.log(this.detail)
				}
			},
			async returns(){
				let res = await this.$api.request(this.$api.order.returnIntercity,{
					orderId: this.orderId
				})
				if (res) {
					this.$public.navTo('index/status_cancel?res=' + JSON.stringify(res))
				}
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.headbg{
		width: 92%;
		padding: 0 4%;
		height: 450rpx;
		color: #FFFFFF;
		background-image: linear-gradient(to bottom,rgb(108,191,49),rgb(108,191,49),rgb(249, 255, 245));
		.head{
			width: 100%;
			margin-bottom: 20rpx;
		}
		.col-24{
			height: 55rpx;
			line-height: 55rpx;
		}
	}
	.detail{
		width: 94%;
		padding: 0 3%;
		padding-bottom: 150rpx;
		position: absolute;
		top: calc(88px + 150rpx);
		.orderMsg{
			width: 92%;
			padding: 12rpx 4%;
			border-radius: 15rpx;
			color: #333333;
			background-color: #FFFFFF;
			.orderTitle{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 31rpx;
				font-weight: bold;
			}
			.row{
				height: 65rpx;
				line-height: 65rpx;
				.col-2{
					font-size: 55rpx;
					font-weight: bold;
				}
				.col-22{
					line-height: 72rpx;	
					overflow: hidden;
				}
			}
		}
		.message{
			width: 92%;
			padding: 12rpx 4%;
			margin-top: 25rpx;
			border-radius: 15rpx;
			color: #333333;
			background-color: #FFFFFF;
			.row{
				height: 85rpx;
				line-height: 85rpx;
				border-bottom: 1px solid #ededed;
			}
			.bzxx{
				border-bottom: none;
				height: auto;
				min-height: 85rpx;
				.bzxxkt{
					font-size: 31rpx;
					font-weight: bold;
				}
				.bzxxnr{
					padding: 0 25rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					border-radius: 11rpx;
					margin-bottom: 15rpx;
					margin-right: 30rpx;
					color: rgb(124,178,84);
					border: 1px solid rgb(124,178,84);
					background-color: rgb(226,242,215);
				}
			}
		}
		.clxx{
			width: 92%;
			padding: 0 4%;
			border-radius: 15rpx;
			margin-top: 25rpx;
			color: #333333;
			background-color: #FFFFFF;
			.clxxkt{
				height: 85rpx;
				line-height: 95rpx;
				font-size: 31rpx;
				font-weight: bold;
			}
			.driver{
				height: 120rpx;
				padding: 25rpx 0;
				font-size: 28rpx;
				.img{
					height: 90rpx;
					position: relative;
					.head_img{
						width: 100%;
						height: 90rpx;
						image{
							margin-top: 15rpx;
							width: 90rpx;
							height: 100%;
						}
					}
					.head_name{
						width: 90%;
						margin-left: 5%;
						position: absolute;
						// bottom: 0;
						left: 0;
						color: #FFFFFF;
						background-color: #1A1A1A;
						height: 35rpx;
						line-height: 35rpx;
						border-radius: 20rpx;
					}
				}
			
				.d_content{
					// height: 120rpx;
					height: 90rpx;
					padding: 15rpx 0;
					.license{
						width: 100%;
						height: 45rpx;
						line-height: 45rpx;
						font-weight: bold;
						color: #333333;
					}
					.model{
						width: 100%;
						height: 45rpx;
						line-height: 45rpx;
						color: #999999;
					}
					// .score{
					// 	height: 45rpx;
					// 	align-items: center;
					// 	.off-1{
					// 		color: #FFAE00;
					// 	}
					// }
				}
				.phone{
					image{
						height: 90rpx;
						margin-top: 15rpx;
					}
				}
			}
		}
		.evaluate{
			margin-top: 25rpx;
			border-radius: 15rpx;
			padding: 20rpx 0;
			background-color: #FFFFFF;
			.ev_title{
				height: 60rpx;
				line-height: 60rpx;
				justify-content: center;
				align-items: center;
				color: #333333;
				.col-4{
					height: 1px;
					background-color: #E6E6E6;
				}
			}
			.ev_score{
				height: 80rpx;
				align-items: center;
				justify-content: center;
			}
			.ev_ni{
				height: 50rpx;
				line-height: 50rpx;
				color: #999999;
			}
		}
		.btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #FFFFFF;
			button{
				width: 100%;
				height: 86rpx;
				line-height: 86rpx;
				border-radius: 43rpx;
				margin-top: 12rpx;
				font-size: 31rpx;
			}
			button[type="warn"]{
				color: rgb(108,191,49);
				border: 1px solid rgb(108,191,49);
				background-color: #FFFFFF;
			}
			button[type="primary"]{
				background-color: rgb(108,191,49);
			}
		}
	}
</style>
